$(function (){
	//滑动部分
	const registBtn = document.querySelector("#phologin");
	const loginBtn = document.querySelector("#login");
	const container = document.querySelector(".container");
	registBtn.addEventListener("click", () => {
		container.classList.remove("right-panel-active");
	});
	loginBtn.addEventListener("click", () => {
		container.classList.add("right-panel-active");
	});
//消除打开页面注册显示功能
	let container_phologin = document.querySelector('.container_phologin');
	setTimeout(function(){
		container_phologin.style.display = 'block';
		container.classList.add("right-panel-active");
	},500)


	// 实例化validate对象
	const validation = new JustValidate('#form1', {
		errorFieldCssClass: 'is-invalid',
		errorLabelStyle: {
			fontSize: '14px',
			color: '#dc3545',
			float:'left'
		},
		successFieldCssClass: 'is-valid',
		successLabelStyle: {
			fontSize: '14px',
			color: '#20b418',
			float:'left'
		},
		focusInvalidField: true,
		lockForm: true,
	});
	//为属性添加校验规则
	validation.addField(
		'#login_username',
		[
			{
				rule: 'required',
				errorMessage: '用户名必须填写！',
			},
		]
	).addField(
		'#login_password',
		[
			{
				rule: 'required',
				errorMessage: '密码必须填写！',
			},
			{
				rule: 'minLength',
				value: 6,
				errorMessage: '密码长度不小于6位！',
			},
		]
	).onSuccess((ev) => {
		//阻值表单的默认行为
		ev.preventDefault();
		//协议验证
		if ($(".protocol-check input").prop("checked") === false) {
			$(".recommend").css("display", "block");
			$(".protocol-check input").addClass("animate__animated animate__wobble");
		} else {
			//如果通过验证,执行fetch请求
			let username = document.querySelector("#login_username").value;
			let pwd = document.querySelector("#login_password").value;
			let formData = new FormData();
			formData.append("username", username);
			formData.append("pwd", pwd);
			fetch("loginByUsername.user", {
				method: "POST",
				body: formData
			}).then(response => response.json()).then(data => {
				console.log(data);
				if (data.flag) {    //登录成功
					//跳转到index.html , 需要将用户信息存储到sessionStorage里
					let userInfo = data.data;
					sessionStorage.setItem("shopping.userInfo", JSON.stringify(userInfo));
					//倒计时跳转
					$(".count-downdcontainer").css("display","block");
					$(".count-down-text").css("display","block");
					$("body").css({"opacity":"0.3"},{"background-color":"#ccc"});
					$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"#ccc"});
					let circle = document.getElementById('cls');
					let total = 5;
					let count = 4;
					let intervalNumber = setInterval(function (){
						$(".count-down-text div").text(`${count}`);
						count--;
						if(count==0){clearInterval(intervalNumber)}
					},1000);


					circle.style.strokeDashoffset = "800";
					circle.style.animationDuration = total + "s";
					circle.style.animationPlayState = "running";
					set(1000 * total);
					circle.classList.add("run-anim");

					function set(total) {
						let interval = setInterval(ret, total);
						function ret() {
							circle.classList.remove("run-anim");
							void circle.offsetWidth;
							clearInterval(interval);
							//跳转页面
							location.href = "index.html";
						}
					}
				} else {
					//展示错误信息
					console.log(data.message);
					startActive();
					var liveToast = document.getElementById('liveToast');
					var myToast = bootstrap.Toast.getOrCreateInstance(liveToast); // Returns a Bootstrap toast instance
					myToast.show();
					//替换内容
					let toastBody = document.querySelector("#liveToast .toast-body");
					toastBody.innerHTML = data.message;
					let count = 0;
					let startTime = new Date().getTime();
					let interval = setInterval(() => {
						if (new Date().getTime() - startTime > 8000) {
							clearInterval(interval);
							return;
						} else {
							$(".toast-header small").text(`${count}秒前`);
							count++;
						}
					}, 1000);
					$("#form1 span").children("input").on("focus", function () {
						clearActive();
					})
				}
			})
		}
	})
	$(".protocol-check input").on("change",()=>{
		if ($(".protocol-check input").prop("checked") === true) {
			$(".recommend").css("display", "none");
			$(".protocol-check input").removeClass("animate__animated animate__wobble");
		}
	})
	$(".protocol-check-tel input").on("change",()=>{
		if ($(".protocol-check-tel input").prop("checked") === true) {
			$(".recommend-tel").css("display", "none");
			$(".protocol-check-tel input").removeClass("animate__animated animate__wobble");
		}
	})
	function startActive(){
		$("#form1 span").eq(0).addClass("span-invalid");
		$("#form1 span").eq(1).addClass("span-invalid");
		$("#form1 span").children("input").eq(0).addClass("input-invalid");
		$("#form1 span").children("input").eq(1).addClass("input-invalid");
	}
	function clearActive(){
		$("#form1 span").eq(0).removeClass("span-invalid");
		$("#form1 span").eq(1).removeClass("span-invalid");
		$("#form1 span").children("input").eq(0).removeClass("input-invalid");
		$("#form1 span").children("input").eq(1).removeClass("input-invalid");
	}


	//实现手机号登录
	// 实例化validate对象
	const validation2 = new JustValidate('#form2', {
		errorFieldCssClass: 'is-invalid',
		errorLabelStyle: {
			fontSize: '14px',
			color: '#dc3545',
			float:'left'
		},
		successFieldCssClass: 'is-valid',
		successLabelStyle: {
			fontSize: '14px',
			color: '#20b418',
			float:'left'
		},
		focusInvalidField: true,
		lockForm: true,
	});
	//为属性添加校验规则
	validation2.addField(
		'#login_phone',
		[
			{
				rule: 'required',
				errorMessage: '手机号必须填写！',
			}
		]
	).addField(
		'#login_verify',
		[
			{
				rule: 'required',
				errorMessage: '密码必须填写！',
			},
			{
				rule: 'minLength',
				value: 6,
				errorMessage: '密码长度不小于6位！',
			},
		]
	).onSuccess((ev) => {
		//阻值表单的默认行为
		ev.preventDefault();
        //协议验证
		if ($(".protocol-check-tel input").prop("checked") === false) {
			$(".recommend-tel").css("display", "block");
			$(".protocol-check-tel input").addClass("animate__animated animate__wobble");
		} else {
			$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"rgb(232, 232, 232)"});
			$(".verify").css("display","block");
			console.log(1)
			$('#captcha').sliderCaptcha({
				repeatIcon: 'fa fa-redo',
				onSuccess: function () {
					console.log(2)
					//如果通过验证,执行fetch请求
					let tel = document.querySelector("#login_phone").value;
					let password = document.querySelector("#login_verify").value;
					let formData2 = new FormData();
					formData2.append("tel", tel);
					formData2.append("pwd",password);
					fetch(`loginByTel.user?tel=${tel}&pwd=${password}`, {
						method: "POST",
						body: formData2
					}).then(response => response.json()).then(data => {
						console.log(data);
						if (data.flag) {
							//登录成功
							//跳转到index.html , 需要将用户信息存储到sessionStorage里
							$(".recommend-tel").css("display", "none");
							let userInfo = data.data;
							sessionStorage.setItem("shopping.userInfo", JSON.stringify(userInfo));
							//倒计时跳转
							$(".count-downdcontainer").css("display","block");
							$(".count-down-text").css("display","block");
							$("body").css({"opacity":"0.3"},{"background-color":"#ccc"});
							$(".right-panel-active").css({"opacity":"0.3"},{"background-color":"#ccc"});
							let circle = document.getElementById('cls');
							let total = 5;
							let count = 4;
							let intervalNumber = setInterval(function (){
								$(".count-down-text div").text(`${count}`);
								count--;
								if(count==0){clearInterval(intervalNumber)}
							},1000);


							circle.style.strokeDashoffset = "800";
							circle.style.animationDuration = total + "s";
							circle.style.animationPlayState = "running";
							set(1000 * total);
							circle.classList.add("run-anim");

							function set(total) {
								let interval = setInterval(ret, total);
								function ret() {
									circle.classList.remove("run-anim");
									void circle.offsetWidth;
									clearInterval(interval);
									//跳转页面
									location.href = "index.html";
								}
							}
						} else {
							//展示错误信息
							console.log(data.message);
							var liveToast = document.getElementById('liveToast');
							var myToast = bootstrap.Toast.getOrCreateInstance(liveToast);
							myToast.show();
							//替换内容
							let toastBody = document.querySelector("#liveToast .toast-body");
							toastBody.innerHTML = data.message;
							let count = 0;
							let startTime = new Date().getTime();
							let interval = setInterval(() => {
								if (new Date().getTime() - startTime > 8000) {
									clearInterval(interval);
									return;
								} else {
									$(".toast-header small").text(`${count}秒前`);
									count++;
								}
							}, 1000);
							$("#form1 span").children("input").on("focus", function () {
								clearActive();
							})
						}

				})
			}
			})
		}
	})
})